<template>
    <div style="height: calc(100% - 40px)">
        <div class="select-form">
            <el-form :inline="true" :model="selectQuery" class="demo-form-inline" @submit.native.prevent>
                <el-form-item label="订单编号" class="select-form-item">
                    <el-input v-model="selectQuery.id" placeholder="订单编号" :clearable="true"></el-input>
                </el-form-item>
                <el-form-item label="订单状态" class="select-form-item">
                    <el-select v-model="selectQuery.ddzt" placeholder="订单状态" :clearable="true">
                        <el-option label="未取消" :value="0"></el-option>
                        <el-option label="已取消" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="select-form-item">
                    <el-button type="primary" @click="select" native-type="submit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 114px 是搜索内容-->
        <div style="height:calc(100% - 114px)">
            <!-- 32px 是页签高度 20px是页签边距-->
            <div style="height:100%; max-height:842px;">
                <el-table :border="true" :data="tableData" :stripe="true" height="100%" class="table"
                    :row-style="{ height: '80px' }" empty-text="暂无数据" :show-overflow-tooltip="true">
                    <el-table-column prop="cId" label="订单编号" min-width="15%" align="center">
                    </el-table-column>
                    <el-table-column prop="cPhone" label="电话号码" min-width="10%" align="center">

                    </el-table-column>
                    <el-table-column prop="cName" label="订单姓名" min-width="10%" align="center">
                    </el-table-column>

                    <el-table-column label="订单状态" min-width="10%" align="center">
                        <template v-slot="slot">
                            {{ slot.row.nStatus == 0 ? '未取消':'已取消' }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="cNode" label="订单备注" min-width="15%" align="center">
                    </el-table-column>


                    
                    <el-table-column prop="dPrice" label="金额" min-width="10%" align="center">
                    </el-table-column>

                    <el-table-column prop="cGoodName" label="商品名称" min-width="10%" align="center">
                    </el-table-column>

                    <el-table-column prop="cSpotName" label="景点名称" min-width="10%" align="center">
                    </el-table-column>
                    <el-table-column label="操作" min-width="10%" align="center">
                        <template v-slot="slot">
                            <el-button type="danger" @click="deleteFl(slot.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <el-pagination background layout="prev, pager, next" :total="total" :page-size="10" class="pagination"
                v-model:current-page="current" @current-change="selectFormDb" />
        </div>

    </div>
</template>
<style scoped>
.select-form {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    border-radius: 10px;
    border-color: #ddd;
}

.select-form-item {
    margin-top: 20px;
    margin-bottom: 20px;
}

.table {
    border: 1px solid;
    border-radius: 10px;
    border-color: #ddd;
    max-height: "100%";
}

.pagination {
    margin-top: 10px;
    float: right;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.dialog-dd {
    width: 500px;
    height: 680px;
}
</style>
<script scoped>
import { Plus } from '@element-plus/icons-vue'
import globalConfig from '../config'
import { loadingInstance } from '../utils/util';
import { ElMessageBox } from 'element-plus'
export default {
    components: {
        Plus
    },
    data() {
        /**
         * 上传文件校验
         * @param {*} rule 
         * @param {*} value 
         * @param {*} callback 
         */
        var checkUpImage = (rule, value, callback) => {
            if (this.form.cImgUrl != null && this.form.cImgUrl != '') {
                return callback();
            } else {
                return callback(new Error('请上传图片'));

            }
        };
        return {
            //上传文件地址
            uploadUrl: globalConfig.url + '/api/file/imgUpload',

            selectQuery: {
                // 订单状态
                ddzt: '',
                // 订单id
                id: ''
            },

            tableData: [],

            // 商品数量
            total: 0,
            showDialog: false,
            showKdDialog: false,
            form: {

            },
            kddh:{},
            // 页数
            current: 1,
            // 加载蒙层
            loding: false
        }
    },
    beforeMount() {
        this.selectFormDb();

    },
    methods: {
        // 查询
        select() {
            // 重置页数
            this.current = 1;
            this.selectFormDb();
        },
        // 查询提交方法
        selectFormDb() {
            var loding = loadingInstance(null, '数据加载中');
            this.$axios({
                url: '/api/orders/v1/select',
                data: {
                    // 当前页数
                    current: this.current,
                    // 订单状态
                    ddzt: this.selectQuery.ddzt,
                    // 订单id
                    id: this.selectQuery.id
                }
            })
                .then(res => {
                    this.tableData = res.data.data.list
                    this.total = res.data.data.total
                })
                .catch(err => {
                    debugger
                })
                .finally(fil => {
                    loding.close();
                })
        },

        // 格式化时间
        formData(time, format = 'YY-MM-DD hh:mm:ss') {
            var date = new Date(time);
            var year = date.getFullYear(),
                month = date.getMonth() + 1,//月份是从0开始的
                day = date.getDate(),
                hour = date.getHours(),
                min = date.getMinutes(),
                sec = date.getSeconds();
            var preArr = Array.apply(null, Array(10)).map(function (elem, index) {
                return '0' + index;
            });

            var newTime = format.replace(/YY/g, year)
                .replace(/MM/g, preArr[month] || month)
                .replace(/DD/g, preArr[day] || day)
                .replace(/hh/g, preArr[hour] || hour)
                .replace(/mm/g, preArr[min] || min)
                .replace(/ss/g, preArr[sec] || sec);

            return newTime;
        },
    

        // 删除
        deleteFl(param) {
            var that = this;
            ElMessageBox.confirm(
                '确认要删除这个订单数据吗？',
                '警告',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                    'close-on-click-modal': false
                }
            )
                .then(() => {
                    var loding = loadingInstance(null, '提交中');
                    // 发起请求
                    that.$axios({
                        url: 'api/orders/v1/del',
                        data: param
                    })
                        .then(res => {
                            debugger
                            that.$message({
                                type: 'success',
                                message: '删除成功'
                            })
                            // 重新查询
                            that.select()
                        })
                        .catch(err => {
                            that.$message({
                                type: 'error',
                                message: '出现错误，请重试'
                            })
                        })
                        .finally(fil => {
                            loding.close();
                        })
                })
                .catch(() => {
                    // 取消按钮操作
                })
        },
    }
}
</script>